import { EComp } from '@/consts';
import { Cascader, CascaderProps, DatePicker, DatePickerProps, Form, FormItemProps, FormProps, Input, InputNumber, InputNumberProps, InputProps, InputTag, InputTagProps, MonthPickerProps, Radio, RadioGroupProps, RangePickerProps, Select, SelectProps, Switch, SwitchProps, TreeSelect, TreeSelectProps, Upload, UploadProps, YearPickerProps } from '@arco-design/web-react';
import type { ReactElement, ReactNode } from 'react';
import { memo } from "react";

const { YearPicker, MonthPicker, RangePicker } = DatePicker;

const TextArea = Input.TextArea;

interface IProps {
    /**
     * 表单配置
     */
    schema: IFormSchema;
    /**
     * 表单值变化
     */
    onFormValuesChange?: (now: Record<string, any>, values: Record<string, any>) => void;

}

/**
 * 用户数据
 */
export default memo(
    function SchemaForm({
        schema, onFormValuesChange
    }: IProps) {
        /**
     * 表单值变化
     */
        const onFormChange = (now: any, values: any) => {
            onFormValuesChange && onFormValuesChange(now, values);
        }
        return (
            <Form
                onValuesChange={onFormChange}
                {...schema.form}
            >
                {
                    schema.formItems?.map((item) => {
                        let comp: ReactElement;
                        const itemProps = item.comp.props ?? {} as any;
                        switch (item.comp.type) {
                            case EComp.INPUT:
                                comp = <Input {...itemProps} />;
                                break;
                            case EComp.InputTag:
                                comp = <InputTag {...itemProps} />;
                                break;
                            case EComp.NUMBER:
                                comp = <InputNumber {...itemProps} />;
                                break;
                            case EComp.PWD:
                                comp = <Input.Password {...itemProps} />;
                                break;
                            case EComp.SELECT:
                                comp = <Select {...itemProps} />
                                break;
                            case EComp.TXT:
                                comp = <div>{itemProps.content || itemProps.placeholder}</div>
                                break;
                            case EComp.TEXT:
                                comp = <TextArea {...itemProps} />
                                break;
                            case EComp.SWITCH:
                                comp = <Switch {...itemProps} />
                                break;
                            case EComp.RADIO:
                                comp = <Radio.Group {...itemProps} />
                                break;
                            case EComp.UPLOAD:
                                comp = <Upload {...itemProps} />
                                break;
                            case EComp.DATE_PICKER:
                                comp = <DatePicker {...itemProps} />
                                break;
                            case EComp.SELECT_TREE:
                                comp = <TreeSelect {...itemProps} />
                                break;
                            case EComp.YEAR_PICKER:
                                comp = <YearPicker {...itemProps} />
                                break;
                            case EComp.MONTH_PICKER:
                                comp = <MonthPicker {...itemProps} />
                                break;
                            case EComp.RANGE_PICKER:
                                comp = <RangePicker {...itemProps} />
                                break;
                            case EComp.Cascader:
                                comp = <Cascader {...itemProps} />
                                break;
                        }
                        const key = Array.isArray(item.props.field) ? item.props.field.join('-') : item.props.field as string;
                        return (
                            <Form.Item key={key} {...item.props}>
                                {comp}
                            </Form.Item>
                        );
                    })
                }
            </Form>
        );
    }
);

/**
 * form配置
 */
export interface IFormSchema {
    /**
     * form属性
     */
    form: FormProps;
    /**
     * form项配置
     */
    formItems?: IFormItemSchema[];
}

/**
 * form.item配置
 */
export interface IFormItemSchema {
    /**
     * 组件配置
     */
    comp: IFormItemRadio | IFormItemSelectTree | IFormItemDatePicker | IFormItemUpload | IFormItemInputComp | IFormItemPwdComp | IFormItemSelect | IFormItemTxt | IFormItemText | IFormItemSwitch | IFormItemInputNumComp | IYearPicker | ICascader | IRangePicker | IFormItemInputTagComp | {
        type: EComp.MONTH_PICKER;
        props: MonthPickerProps
    };
    /**
     * form.item属性
     */
    props: FormItemProps;
}

/**
 * input组件
 */
export interface IFormItemInputComp {
    /**
     * Input组件
     */
    type: EComp.INPUT;
    /**
     * Input组件属性
     */
    props?: InputProps;
}

/**
 * input组件
 */
export interface IFormItemInputTagComp {
    /**
     * Input组件
     */
    type: EComp.InputTag;
    /**
     * Input组件属性
     */
    props?: InputTagProps;
}

/**
 * input number组件
 */
export interface IFormItemInputNumComp {
    /**
     * Input number组件
     */
    type: EComp.NUMBER;
    /**
     * Input number组件属性
     */
    props?: InputNumberProps;
}

/**
 * 密码框组件
 */
export interface IFormItemPwdComp {
    /**
     * Input.password组件
     */
    type: EComp.PWD;
    /**
     * Input.password组件属性
     */
    props?: InputProps;
}

/**
 * 下拉框组件
 */
export interface IFormItemSelect {
    type: EComp.SELECT;
    props?: SelectProps
}

/**
 * 文本组件
 */
export interface IFormItemTxt {
    type: EComp.TXT;
    props: { content?: ReactNode, placeholder?: string };
}

/**
 * 文本域组件
 */
export interface IFormItemText {
    type: EComp.TEXT;
    props: { content?: ReactNode, placeholder?: string };
}
/**
 * switch组件
 */
export interface IFormItemSwitch {
    type: EComp.SWITCH,
    props?: SwitchProps
}

/**
 * 单选项组件
 */
export interface IFormItemRadio {
    type: EComp.RADIO,
    props?: RadioGroupProps
}

/**
 * 上传组件
 */
export interface IFormItemUpload {
    type: EComp.UPLOAD,
    props?: UploadProps
}

/**
 * 日期组件
 */
export interface IFormItemDatePicker {
    type: EComp.DATE_PICKER,
    props?: DatePickerProps
}

/**
 * 树选择
 */
export interface IFormItemSelectTree {
    type: EComp.SELECT_TREE,
    props?: TreeSelectProps
}

/**
 * 年份选择
 */
export interface IYearPicker {
    type: EComp.YEAR_PICKER,
    props?: YearPickerProps
}

/**
 * 范围选择
 */
export interface IRangePicker {
    type: EComp.RANGE_PICKER,
    props?: RangePickerProps
}

/**
 * 级联选择
 */
export interface ICascader {
    type: EComp.Cascader,
    props?: CascaderProps
}